<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06_外间距测试</title>
    <style>
      /* 选中所有元素并去掉它们默认自带的内外间距*/
      * {
        margin: 0;
        padding: 0;
      }
      .fu{
        background-color: rgba(225,225,0,0.2);
        overflow: hidden;/*给父元素生成BFC结界保护*/
      }
      .fu>div{
        width: 100px;
        height: 100px;
        background-color: rgba(0,0,225,0.6);
        border: 2px solid #00f;
        color: #fff;
        font-size: 25px;
        font-weight: bold;

      }
      .z1{
        margin-bottom: 30px;
        margin-top: 50px;

      }
      .z2{
        margin-top: 50px;/*1.垂直方向上，相邻兄弟间的外间距取大值显示*/
      }
      .z4{
        margin-bottom: 50px;
      }
      .z3{
        margin: 10px;/*四个方向的外间距都是10*/
        margin: 10px 20px;/*上下10 左右20*/
        margin: 10px 20px 30px;/*上10 下30 右20 左10*/
        margin: 10px 20px 30px 40px;/*上10 右20 下30 左40*/
        /*实现块级元素自身的水平居中auto会自动将元素的左右外间距计算成相等的值*/
        margin: 0 auto;
      }
      span{
        border: 2px solid #f00;
      }
      .s2{
        /*行内元素垂直方向上的外间距不会是生效*/
        margin: 20px;
      }
  </style>
</head>
<body>
<span>span</span>
<span class="s2">span</span>
<span>span</span>
<div class="fu">
  <div class="z1">111</div>
  <div class="z2">222</div>
  <div class="z3">333</div>
  <div class="z4">444</div>
</div>
</body>
</html>